/* mobile**/
@media screen and (max-width:768px){
    .activity-content {
        width: 100%;
        max-width: 768px;
        /* min-height: 100vh; */
        background: #fff;
        box-sizing: border-box;
        padding: 0 0 44px 0;
        margin: 0 auto;
      }
      .activity-html{
          width: 100%;
          box-sizing: border-box;
          padding: 4vw;
          font-size: 1em;
      }
      .activity-html p{
          width: 100%;
          line-height: 1.5em;
          margin: 0 0 10px 0;
      }
      .activity-html p>img,
      .activity-html span>img{
          width: 100%;
          height: auto;
      }
      .bottom-btn {
        position: fixed;
        width: 100%;
        left: 0;
        bottom: 0;
        right: 0;
        display: flex;
      }
      .bottom-btn button.van-button {
        border: 0;
        background: #37acff;
        color: #fff;
        max-width: 708px;
        margin: 0 auto;
        height: 44px;
        line-height: 44px;
        border-radius: 0;
      }
      button.van-button .van-button__text {
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .van-button__text .left-icon {
        display: block;
        width: 25px;
        height: 25px;
        background: url(../img/icon_detail.png) no-repeat 0 -350px/100px 800px;
      }
      .activity-ticket {
        width: 100%;
        max-width: 768px;
        margin: 0 auto;
        overflow-y: auto;
        box-sizing: border-box;
        position: relative;
        padding: 4vw 0 0 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
      .popup-close {
        width: 100%;
        height: 30px;
        box-sizing: border-box;
        padding: 5px 4vw;
      }
      .popup-close .van-icon {
        float: right;
        font-size: 20px;
        color: #999;
      }
      .popup-close p {
        width: 100%;
        text-align: center;
        font-size: 1.1em;
        line-height: 20px;
      }
      .popup-content {
        width: 100%;
        height: 40vh;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        padding: 10px 4vw;
      }
      .popup-bottom {
        width: 100%;
        max-width: 708px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        border-top: 1px solid #dcdfe6;
      }
      .ticket-total {
        width: 60%;
        height: 44px;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 0 10px;
        font-size: 1em;
      }
      .next-btn {
        width: 40%;
      }
      .next-btn button.van-button {
        width: 100%;
        border: 0;
        background: #37acff;
        color: #fff;
        height: 44px;
        line-height: 44px;
        border-radius: 0;
      }
      .next-btn button.van-button:disabled{
          background: #999;
      }
      .total-price {
        margin: 0 0 0 10px;
        color: #f93;
      }
      .ticket-check .van-checkbox-group {
        width: 100%;
        display: flex;
        flex-direction: column;
      }
      .ticket-check .van-checkbox {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        margin: 5px 0;
      }
      .ticket-check .van-checkbox__label {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        border: 1px solid #e6e6e6;
        box-sizing: border-box;
        min-height: 45px;
        margin: 0;
        border-radius: 4px;
        color: #999;
      }
      .ticket-check .van-checkbox__icon--checked + .van-checkbox__label {
        border-color: #0099e9;
        color: #0099e9;
        background: url(../img/ticket_jiao.png) no-repeat right bottom/10px
          15px;
      }
      .ticket-check .van-checkbox__icon--disabled + .van-checkbox__label {
        background: #e6e6e6;
      }
      .ticket-check .van-checkbox i.van-icon {
        display: none;
      }
      .label-left {
        margin-left: 10px;
      }
      .label-right {
        margin-right: 10px;
      }
      .ticket-name {
        font-size: 1em;
        font-weight: normal;
      }
      .ticket-price {
        font-size: 1em;
        color: #f93;
      }
      .ticket-discount{
          margin: 10px 0 0 0;
      }
      .ticket-discount .van-cell {
        padding: 5px;
        margin: 5px 0 0 0;
        border-radius: 4px;
        color: #ffc000;
      }
      .ticket-discount .van-cell i.van-icon {
        color: #ffc000;
      }
      .coupon-content {
        width: 100vw;
        height: 100vh;
        background: #fff;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
      .coupon-header {
        width: 100%;
        max-width: 768px;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        padding: 0 4vw;
        margin: 4vw auto 0 auto;
      }
      .coupon-header > h3 {
        width: 100%;
        text-align: center;
        font-size: 1.2em;
        font-weight: normal;
        margin: 0 0 10px 0;
      }
      .coupon-header > p {
        width: 100%;
        font-size: 1em;
        color: #999;
      }
      .coupon-header .van-cell.van-field {
        padding: 10px 0;
      }
      .coupon-header input.van-field__control {
        height: 40px;
        line-height: 40px;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        padding: 0 5px;
      }
      .coupon-header input.van-field__control::placeholder {
        color: #999;
      }
      .coupon-header .van-field__button .van-button.van-button--default {
        height: 36px;
        line-height: 36px;
        background: #ffc000;
        color: #fff;
        font-size: 1em;
        padding: 0 18px;
        border: 0;
        border-radius: 4px;
      }
      .coupon-footer {
        width: 100%;
        max-width: 768px;
        margin: 0 auto;
        display: flex;
      }
      .coupon-footer .van-button.van-button--default.van-button--large {
        border: 0;
        border-radius: 0;
        height: 44px;
        line-height: 44px;
        background: #dcdfe6;
        color: #444;
        font-size: 1.125em;
      }
      .ticket-num{
          margin: 10px 0 0 0;
      }
      .ticket-num .van-stepper{
          margin: 5px 0 0 0;
      }
      .ticket-num .van-stepper__input[disabled]{
          color: #4d4d4d;
      }
      .header{
        z-index: 1001;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background: #fff;
        box-shadow: 0 1px 2px rgba(0,0,0,.15);
    }
    .header-container{
      height: 46px;
    }
    .header-top{
        display: flex;
        box-sizing: border-box;
        width: 100%;
        max-width: 768px;
        height: 46px;
        padding: 0 4vw;
        margin: 0 auto;
        justify-content: space-between;
        align-items: center;
    }
    .header-logo{
        width: 25%;
        max-width: 119px;
        height: 46px;
        display: flex;
        align-items: center;
    }
    .header-logo>img{
        width: 100%;
        height: auto;
    }
    .header-nav{
        display: flex;
    }
    .header-nav i.van-icon{
        font-size: 18px;
        color: #999;
    }
    .nav-list{
        z-index: 1001;
        position: absolute;
        top: 46px;
        left: 0;
        display: flex;
        flex-direction: column;
        width: 100%;
        box-sizing: border-box;
        padding: 5px 4vw;
        background: #fff;
        border-top: 1px solid #dcdfe6;
    }
    .nav-item{
        width: 100%;
        box-sizing: border-box;
        padding: 5px 0;
        display: flex;
        align-items: center;
    }
    .nav-item>a{
      max-width: 100%;
      display: inline-block;
      flex: 1;
      color: #455a64;
    }
    .user-pic{
      display: flex;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      margin: 0 5px 0 0;
    }
    .login-info{
      display: flex;
      align-items: center;
      margin: 0 20px 0 0;
    }
    .mask{
        z-index: 1000;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: rgba(0,0,0,.3)
    }
    /* Home Page Style */
    .form-container {
      width: 100%;
      /* min-height: 100vh; */
      max-width: 768px;
      padding: 0 4vw 48px 4vw;
      box-sizing: border-box;
      background: #fff;
    }
    .form-container .van-hairline--top-bottom::after {
      border-width: 0;
    }
    .form-container .van-cell:not(:last-child)::after{
        border: 0;
    }
    .form-container .van-cell.van-field{
        padding: 0 10px 0 15px;
        height: 40px;
        line-height: 40px;
        margin: 0 0 10px 0;
    }
    .form-container .van-cell.van-field input{
        height: 39px;
        border: 1px solid #dcdfe6;
        padding: 0 10px;
        outline: none;
        border-radius: 4px;
        line-height: 39px;
    }
    .form-container .van-cell.van-field input::placeholder{
        color: #999;
    }
    .form-container .van-cell.van-field.error input{
        border-color: #f44;
    }
    .form-container .van-cell.van-field.active input{
        border-color: #37acff;
    }
    .form-container .van-field__button{
        padding-left: 8px;
    }
    .form-container .van-field__button  .van-button.van-button--primary.van-button--small{
        width: 90px;
        height: 35px;
        line-height: 35px;
        background: #37acff;
        border: 0;
        font-size: 0.9em;
    }
    .form-container .van-field__button  .van-button.van-button--primary.van-button--small:disabled{
        background: #999;
    }
  
    .textarea-field{
      width: 100%;
    display: flex;
    position: relative;
    box-sizing: border-box;
    background-color: #fff;
    color: #333;
    font-size: 14px;
    padding: 0 10px 0 15px;
    margin: 0 0 10px 0;
    /* align-items: center; */
    justify-content: space-between;
  }
  .textarea-field>div{
      flex: 1;
  }
  .textarea-label{
      max-width: 90px;    
  }
  .textarea-field textarea{
      width: 100%;
      height: 80px;
      border: 0;
      padding: 5px 10px;
      outline: none;
      resize: none;
      box-sizing: border-box;
      background-color: transparent;
  }
  .textarea-value{
      width: 100%;
      display: flex;
      flex-direction: column;
      border: 1px solid #dcdfe6;
      border-radius: 4px;
  }
  .textarea-value.active{
      border-color: #37acff;
  }
  .textarea-value.error{
      border-color: #f44;
  }
  .textarea-field textarea::placeholder{
      color: #999;
  }
  .textarea-prompt{
      width: 100%;
      box-sizing: border-box;
      padding: 0 10px;
      text-align: right;
      font-size: 1em;
      color: #999;
  }
  .submit-btn {
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    display: flex;
    background: #fff;
  }
  .submit-btn .van-button.van-button--default.van-button--large {
    width: 100%;
    height: 48px;
    border: 0;
    border-radius: 0;
    background: #37acff;
    color: #fff;
  }
  .submit-btn .van-button.van-button--default.van-button--large:disabled {
    background: #999;
  }
  .form-title{
    width: 100%;
    display: flex;
    margin: 5px 0 10px 0;
    box-sizing: border-box;
    border-bottom: 1px solid #00bcd4;
  }
  .form-title>div{
    width: auto;
    box-sizing: border-box;
    padding: 5px 10px;
    background: #00bcd4;
    color: #fff;
  }
  .ticket-info{
    display: flex;
    flex-direction: column;
    margin: 5px 0;
  }
  .ticket-item{
    display: flex;
    justify-content: space-between;
    margin: 5px 0;
  }
  .ticket-item>span{
    display: inline-block;
  }
  .register-box{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #fff;
  }
  .register-logo{
    width: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 8vw 0 4vw 0;
  }
  .register-logo>img{
    width: 100%;
    height: auto;
  }
  .register-title{
    width: 100%;
    text-align: center;
    font-size: 1.125em;
    color: #4d4d4d;
    margin: 0 0 4vw 0;
  }
  .register-form{
    width: 92vw;
    display: flex;
    flex-direction: column;
  }
  .register-field{
    display: flex;
    box-sizing:border-box;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #dcdcdc;
    overflow: hidden;
  }
  .register-field>input{
    flex-grow: 1;
    height: 34px;
    line-height: 34px;
    background: transparent;
  }
  .field-icon{
    display: inline-block;
    width: 40px;
    height: 44px;
  }
  .field-icon-account{
    background: url(../img/sweep_code_landing_icon1.png) no-repeat;
    background-position: center 10px;
  }
  .field-icon-img{
    background: url(../img/sweep_code_landing_icon2.png) no-repeat;
    background-position: center 14px;
  }
  .field-icon-phone{
    background: url(../img/sweep_code_landing_icon2.png) no-repeat;
    background-position: center -65px;
  }
  .field-icon-password{
    background: url(../img/sweep_code_landing_icon1.png) no-repeat;
    background-position: center -50px;
  }
  .register-field .image-code{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 26.6vw;
  }
  .register-field .image-code>img{
    width: 100%;
    height: auto;
  }
  .register-field .code-btn{
    width: 26.6vw;
    height: 36px;
  }
  .register-field .code-btn>button{
    width: 100%;
    height: 36px;
    background: #37acff;
    color: #fff;
    border-radius: 4px;
  }
  .register-field .code-btn>button:disabled{
    background: #999;
  }
  .register-btn{
    width: 100%;
    height: 44px;
    background: #37acff;
    color: #fff;
    font-size: 1.125em;
    border-radius: 4px;
    margin: 8vw 0 0 0;
  }
  .protocol-agree .van-checkbox{
    display: flex;
    /* justify-content: center; */
    align-items: center;
  }
  .protocol-agree{
    width: 100%;
    margin: 4vw 0 0 0;
  }
  .protocol-agree .van-checkbox__icon{
    height: 16px;
    line-height: 16px;
  }
  .protocol-agree .van-checkbox__icon .van-icon{
    width: 16px;
    height: 16px;
    line-height: 16px;
    font-size: 12px;
  }
  .protocol-agree .van-checkbox__icon--checked .van-icon{
    border-color: #37acff;
    background-color: #37acff;
  }
  .proticol-link,
  .proticol-link:hover{
    color: #37acff;
  }
  .otherways-login{
    width: 100%;
    margin: 20px 0 0 0;
  }
  .otherways-title{
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    color: #999;
  }
  .otherways-title>i{
    display: inline-block;
    flex: 1;
    height: 1px;
    background: #ddd;
    margin: 0 4vw;
  }
  .otherways-title>span{
    display: inline-block;
  }
  .otherways-link{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 15px 0 10px 0;
  }
  .otherways-link>a{
    display: inline-block;
    width: 44px;
    height: 44px;
    margin: 0 10px;
  }
  .weixin-login{
    background: url(../img/sweep_code_landing_icon.png) no-repeat;
    background-position: -1px -1px;
  }
  .qq-login{
    background: url(../img/sweep_code_landing_icon.png) no-repeat;
    background-position: -1px -101px;
  }
  .sina-login{
    background: url(../img/sweep_code_landing_icon.png) no-repeat;
    background-position: -1px -201px;
  }
  .login-link{
    width: 100%;
    text-align: center;
    margin: 10px 0;
  }
  .login-link a,
  .login-link a:hover{
    color: #37acff;
  }
  .forget-password{
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin: 4vw 0 0 0;
  }
  .login-toggle{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 4vw 0;
  }
  .login-title{
    display: none;
    flex: 1;
    text-align: center;
    font-size: 1.125em;
    font-weight: 600;
    color: #aaa;
  }
  .login-title.active,
  .login-title:hover{
    color: #37acff;
  }
}